<template>
<div class="wayselect-sc flex-and-center flex-center">
  <div :class="['item', 'item-aj',way==='COUNTER'?'item-active':'']" @click="change('COUNTER')">
    专柜领取
  </div>
  <div :class="['item',way==='EXPRESS'?'item-active':'']" @click="change('EXPRESS')">
    快递到付
  </div>
</div>
</template>

<script>
import FastClick from 'fastclick'
export default {
  data() {
    return {
      way: ''
    }
  },
  created() {
    this.way = 'COUNTER'
  },
  mounted() {
    this.fastClickRegister()
  },
  watch: {
    way(newVal, oldVal) {
      this.$emit('way', newVal)
    }
  },
  methods: {
    change(val) {
      this.way = val
    },
    fastClickRegister() {
      FastClick.attach(document.querySelector('.wayselect-sc'))
    }
  }
}
</script>

<style lang="less" scoped>
.wayselect-sc {
    margin-bottom: 20px;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
}

.item {
    border: 1px solid #D6D6D6;
    color: #666;
    font-size: 16px;
    width: 150px;
    height: 88px;
    line-height: 90px;
    text-align: center;
    box-sizing: content-box;
    -webkit-tap-highlight-color: transparent;
}

.item-aj {
    margin-right: 23px;
}

.item-active {
    color: #000;
    border-width: 2px;
    width: 148px;
    border-color: #000;
}
</style>
